﻿@model dynamic

@{
    ViewBag.Title = "系统订单列表";

    Layout = "~/Views/Shared/bootstrap3.cshtml";
}

<div class="row-fluid">
    <div class="col-md-12">
        <div class="panel panel-default">

            <div class="panel-body">
                <form class="form-inline">
                    @*<a class="btn-primary btn" role="button" data-toggle="modal" onclick="view.add()"> 添加用户</a>*@
                    <div class="input-group pull-right">
                        <input type="email" class="form-control" placeholder="关键字" id="sousuo" autocomplete="off">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">搜索!</button>
                        </span>
                    </div><!-- /input-group -->
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row-fluid">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <td>系统订单号</td>
                            <td>订单名称</td>
                            <td>订单价格</td>
                            <td>是否已付款</td>
                            <td>添加时间</td>
                            <td>操作</td>

                        </tr>
                    </thead>
                    <tbody data-bind="visible:datalist().length==0">
                        <tr>
                            <td colspan="5">数据载入中</td>
                        </tr>
                    </tbody>
                    <tbody data-bind="foreach:datalist">

                        <tr>

                            <td data-bind="text:Sysorderid"></td>
                            <td data-bind="text:Subject"></td>
                            <td data-bind="text:Price"></td>
                            <td data-bind="text:IsPay"></td>
                            <td data-bind="text:Addtime"></td>
                            <td>
                                <a class="btn btn-sm btn-primary" href="#" data-bind="attr:{'href':'@Url.Action("Index","Pay")?Sysorderid='+Sysorderid},visible:!IsPay">
                                    去付款
                                </a>
                            </td>
                            <td>
                                <a class="btn-default btn btn-sm" data-bind="click:$parent.edit">查看修改</a>
                                <a class="btn-danger btn btn-sm" data-bind="click:$parent.del">删除</a>

                            </td>

                        </tr>
                    </tbody>

                </table>
                <div class="pagination">
                    <ul class="pagination">
                        <li><a href="javascript:void(0);" data-bind="click:function(){ sel(1)}">第一页</a></li>
                        <li><a href="javascript:void(0);" data-bind="click:function(){ sel(datas().up)}">上一页</a></li>
                        <!-- ko foreach: viewpages -->
                        <li data-bind="css:{ active:$data==$parent.datas().page}"><a href="javascript:void(0);" data-bind="text:$data,click:$parent.sel"></a></li>
                        <!-- /ko -->
                        <li><a href="javascript:void(0);" data-bind="click:function(){ sel(datas().next)}">下一页</a></li>
                        <li><a href="javascript:void(0);" data-bind="click:function(){ sel(datas().total)}">最后一页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>




<!-- 修改窗口 -->
<div id="editModal" class="modal  " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">
                <div data-bind='template: {name:"edm",data: editmodel }'> </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                <button class="btn btn-primary" onclick="view.editajax(this)">确定</button>
            </div>
        </div>
    </div>
</div>
@*@{
        var model = new User();
    }*@
<!-- 添加窗口-->
<div id="addModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">用户添加</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addform">
                    <div class="form-group">
                        <label class="control-label col-sm-2">商户名称 </label>
                        <div class="col-sm-6">
                            @*@Html.TextBoxFor(x => model.UserName, new { @class = "form-control" })*@

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">商户通知url </label>
                        <div class="col-sm-6">
                            @*@Html.TextBoxFor(x => model.NotifyUrl, new { @class = "form-control" })*@

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">商户返回url </label>
                        <div class="col-sm-6">
                            @*@Html.TextBoxFor(x => model.UserUrl, new { @class = "form-control" })*@
                        </div>
                    </div>
                    @*<div class="form-group">
                            <label class="control-label col-sm-2">Id </label>
                            <div class="col-sm-6">
                                <select name="Ts" class="form-control ">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                        </div>*@

                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                <button class="btn btn-primary " onclick="view.addajax(this)" type="button" id="btnadd" autocomplete="off" data-loading-text="加载中">确定</button>
            </div>
        </div>
    </div>
</div>

<!--修改模板-->
<script id='edm' type='text/html'>
    <form class="form-horizontal" id="editform">
        <div class="form-group">
            <label class="control-label col-sm-2" for="inputEmail">Name </label>
            <div class="col-sm-6">
                <input type="text" class="form-control " name="Name" id="Name" data-bind="value:Name" />

            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inpId">Name </label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="Id" data-bind="value:Id" id="Id" />

            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inpId">Id </label>
            <div class="col-sm-6 ">
                <select name="Ts" id="Ts" class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>

        </div>

    </form>
</script>




@section scripts
{

    <script src="/Resource/knockout-2.2.0.js"></script>
    <script>
        var view = {
            //添加窗口
            add: function () {
                $("#addModal").modal({
                    keyboard: true,
                    remote: true,
                });
            },
            //添加数据
            addajax: function () {
                $(arguments[0]).button('loading');
                $.ajax({
                    url: '@Url.Action("Add", "User")',
                    type: 'POST',
                    dataType: 'json',
                    data: $('#addform').serialize(),
                    success: function (d) {
                        if (d.code == '0') {
                            //按钮变色
                            $(arguments[0]).button('reset');
                            //隐藏修改窗口
                            $('#addModal').modal('hide');
                            //信息提示
                            $.globalMessenger().post({
                                message: "成功添加",
                                hideAfter: 3,
                                //type: 'error'
                            });
                        } else {
                            alert("添加失败");
                        }

                    }
                });
            },
            //修改数据
            editajax: function () {
                $(arguments[0]).button('loading');
                $.ajax({
                    url: '@Url.Action("Edit", "OrderForm")',
                    type: 'get',
                    data: $('#editform').serialize(),
                    success: function (data) {
                        //按钮变色
                        $(arguments[0]).button('reset');
                        //隐藏修改窗口
                        $('#editModal').modal('hide');
                        //信息提示
                        $.globalMessenger().post({
                            message: "修改成功",
                            hideAfter: 3,
                            //type: 'error'
                        });
                    }
                });
            }
        };
        function Kvm() {

            var k = this;
            //数据集
            k.datas = ko.observable();
            // 数组数据列表
            k.datalist = ko.observableArray([]);
            //分页数字数组
            k.viewpages = ko.observableArray([]);
            //修改模型
            k.editmodel = ko.observable({
                Name: '',
                Id: '',
                ts: ''
            });
            //修改
            k.edit = function ($model) {
                $.ajax({
                    url: '@Url.Action("Edit", "OrderForm")',
                    dataType: 'json',
                    data: 'id=' + $model.Id,
                    success: function (d) {
                        if (d.code == "0") {
                            //弹窗
                            k.editmodel(d.data);
                            $('#editModal').modal({
                                keyboard: false,
                                remote: true,
                            });
                        }
                    }
                });

            };
            //删除
            k.del = function ($model) {
                //弹窗
                var cf = confirm("确定该删除");
                if (cf) {
                    $.get('@Url.Action("Del", "OrderForm")' + '?id=' + $model.Id, function (d) {
                        if (d.code == 0) {
                            alert("删除成功");
                        }
                    });
                }

            };


            //分页
            k.sel = function ($page) {
                fy($page);
            };
        }

        var kvm = new Kvm();

        //获取数据
        function fy($page) {
            $.ajax({
                url: '@Url.Action("listJson", "OrderForm")',
                type: 'post',
                //page：第几页，rows：每页几个
                data: { page: $page, rows: 9, },
                dataType: 'json',

                success: function (d) {
                    kvm.datas(d.data);
                    kvm.datalist(kvm.datas().datalist);
                    kvm.viewpages(d.data.viewpages);

                    //kvm.maxp(data.MaxPages);
                    //kvm.minp(data.MinPages);
                },
            });
        }



        $(function () {

            //绑定
            ko.applyBindings(kvm);
            //获取数据
            fy(1);

        });




    </script>
}
